<template>
  <a-modal
    v-model:visible="isShow"
    :footer="null"
    @cancel="closeModal"
    :destroy-on-close="true"
    width="30vw"
  >
    <a-form layout="inline" class="remark-form">
      <a-form-item label="备注">
        <a-textarea
          allow-clear
          :autosize="{ minRows: 2, maxRows: 6 }"
          placeholder="请输入备注信息"
          v-model:value="state.remarkDesc"
        />
      </a-form-item>
    </a-form>
    <div class="text-center mt20">
      <a-space>
        <a-button
          type="primary"
          @click="confirmRemarkAllocation"
          :loading="state.loadingConfirmAllocationBtn"
        >
          确定
        </a-button>
        <a-button @click="closeModal"> 取消 </a-button>
      </a-space>
    </div>
  </a-modal>
</template>
<script setup>
import { todo_remark_add_post } from 'server/modules/7537'
import { reactive, toRef } from 'vue'
import { message } from 'ant-design-vue'

const props = defineProps(['ids', 'showAddRemarkModal'])

const isShow = toRef(props, 'showAddRemarkModal')

const emit = defineEmits(['refresh', 'closeModal'])

const state = reactive({ remarkDesc: null, loadingConfirmAllocationBtn: false })

async function confirmRemarkAllocation() {
  if (state.remarkDesc === '') {
    message.error('请输入备注')
    return
  }
  state.loadingConfirmAllocationBtn = true
  Promise.all(
    props.ids.map(id => {
      return todo_remark_add_post({
        bizId: id,
        bizType: 10,
        remark: state.remarkDesc
      })
    })
  )
    .then(res => {
      const success = res.every(({ success }) => success)
      if (success) {
        message.success('success')
        emit('refresh')
      } else {
        res.forEach(({ retInfo }) => {
          message.error(retInfo)
        })
      }
    })
    .finally(() => {
      state.loadingConfirmAllocationBtn = false
      closeModal()
    })
}
function closeModal() {
  state.remarkDesc = null
  emit('closeModal')
}
</script>
<style lang="scss" scoped>
.remark-form :deep() {
  .ant-form-item {
    display: flex;
    flex-grow: 1 !important;
    .ant-form-item-control {
      flex-grow: 1;
    }
  }
}
.text-center :deep() {
  text-align: center;
}
</style>
